<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      layer: new Tile(),
      wxMap: new XYZ({
        url: 'https://api.maptiler.com/maps/toner/256/{z}/{x}/{y}.png?key=B3EG5uYPUvFucEWVoCa3'
      }),
      tfMap: new XYZ({
        url: 'https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=B3EG5uYPUvFucEWVoCa3'
      })
    })

    const init = () => {
      state.map = new Map({
        target: state.mapBox,
        layers: [state.layer],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [0, 0],
          zoom: 1 // 地图缩放级别（打开页面时默认级别）
        })
      })
      state.layer.setSource(state.wxMap)
    }

    // 设置图层源
    const setSource = (data) => {
      state.layer.setSource(state[data])
    }
    `
    return {
      code
    }
  }
}
</script>
